import QtQuick 1.1
import com.nokia.meego 1.0
//import com.nokia.symbian 1.0
import "logic.js" as JS

Page {
    id: root
    property int size : 9
    property int startBallNum: 5
    property int colorNum: 7
    property int score: 0
    property int nextBallNum: 3
    property string highScoreName: ""
    property int highScore: 0

    state: if (screen.currentOrientation === Screen.Portrait ||
                   screen.currentOrientation === Screen.PortraitInverted) {
               "Portrait"
           }
           else {
               "Landscape"
           }

    Rectangle {
        id: rootRect
        anchors.fill: parent
        color: "black"
        Rectangle {
            id: scoresRect
            anchors.top: parent.top
            anchors.left: parent.left
            Rectangle {
                id: highScoreRect
                anchors.top: parent.top
                anchors.left: parent.left
                Column {
                    anchors.centerIn: parent
                    Label {
                        //                    Text {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "High Score"
                        font.bold: true
                    }
                    Label {
                        //                    Text {
                        id: highscore
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: highScoreName +"   "+highScore
                    }
                }
            }
            Rectangle {
                id: scoreRect
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                Column {
                    anchors.centerIn: parent
                    Label {
                        //                    Text{
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Score"
                        font.bold: true
                    }
                    Label {
                        //                    Text {
                        id: currentScore
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: root.score
                    }
                }
            }
        }

        GridView {
            id: background
            interactive: false
            anchors.centerIn: parent
            width: Math.min(parent.width, parent.height)
            height: width
            cellWidth: Math.floor(width/root.size)
            cellHeight: Math.floor(height/root.size)
            model: root.size*root.size
            delegate: Image {
                id: cell
                smooth: true
                width:background.cellWidth
                height:background.cellHeight
                source: "../../images/cell.png"
                fillMode: Image.Stretch
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        JS.handleBoardClick(cell.x, cell.y)
                    }
                }
            }
        }
        Rectangle {
            id: controlRect
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            Rectangle {
                id: nextColorRect
                anchors.top: parent.top
                anchors.left: parent.left
                Column {
                    id: nextColorCol
                    anchors.centerIn: parent
                    width: parent.width
                    Label {
                        //                    Text {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Next Colors"
                        font.bold: true
                    }
                    Row {
                        anchors.horizontalCenter: parent.horizontalCenter
                        Repeater {
                            id: nextBallRepeater
                            delegate:Ball {
                                width:background.cellWidth
                                height:background.cellHeight
                            }
                            model:nextBallNum
                        }
                    }
                }
            }

            Rectangle {
                id: newButtonRect
                Button {
                    id: newButton
                    width: parent.width
                    anchors.centerIn: parent
                    text: "New Game"
                    onClicked: {
                        if (JS.isGaming() === true) {
                            newGameConfirm.open()
                        }
                        else {
                            if (root.score > root.highScore) {
                                console.log("save high score")
                                JS.openSaveHighScoreDialog()
                            }
                            JS.startNewGame()
                        }
                    }
                }
            }

            Rectangle{
                id: highScoreButtonRect
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                Button {
                    id: highScores
                    width: parent.width
                    anchors.centerIn: parent
                    text: "High Scores"
                    onClicked: {
                        JS.showHighScoresDialog()
                    }
                }
            }
        }
    }

    HighScores {
        id: highScoresDialog
    }

    SaveHighScoreDialog{
        id: saveScoreDialog
        score: root.score
        onNameInputted: {
            JS.saveHighScore(name)
            JS.updateHighScore()
            JS.startNewGame()
        }
    }

    QueryDialog{
        id: newGameConfirm
        acceptButtonText: "Yes"
        rejectButtonText: "No"
        titleText: "Start New Game"
        message: "Are you sure to leave current game and start a new game?"
        onAccepted: {
            if (root.score > root.highScore) {
                console.log("save high score")
                JS.openSaveHighScoreDialog()
            }
            else {
                JS.startNewGame()
            }
        }
    }

    Connections {
        target: platformWindow
        onVisibleChanged: JS.handleVisibleChanged(platformWindow.visible)
    }

    states: [
        State {
            name: "Portrait"
            AnchorChanges {
                target: scoresRect
                anchors.bottom: background.top
                anchors.right: parent.right
            }
            PropertyChanges {
                target: highScoreRect
                width: parent.width/2
                height: parent.height
            }
            PropertyChanges {
                target: scoreRect
                width: parent.width/2
                height: parent.height
            }
            AnchorChanges {
                target: controlRect
                anchors.top: background.bottom
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
            }
            PropertyChanges {
                target: nextColorRect
                width: parent.width/3
                height: parent.height
            }
            PropertyChanges {
                target: highScoreButtonRect
                width: parent.width/3
                height: parent.height
            }
            AnchorChanges {
                target: newButtonRect
                anchors.left: nextColorRect.right
                anchors.right: highScoreButtonRect.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
            }
        },
        State {
            name: "Landscape"
            AnchorChanges {
                target: scoresRect
                anchors.bottom: parent.bottom
                anchors.right: background.left
            }
            PropertyChanges {
                target: highScoreRect
                width: parent.width
                height: parent.height/2
            }
            PropertyChanges {
                target: scoreRect
                width: parent.width
                height: parent.height/2
            }
            AnchorChanges {
                target: controlRect
                anchors.top: parent.top
                anchors.left: background.right
            }
            PropertyChanges {
                target: nextColorRect
                width: parent.width
                height: parent.height/3
            }
            PropertyChanges {
                target: highScoreButtonRect
                width: parent.width
                height: parent.height/3
            }
            AnchorChanges {
                target: newButtonRect
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: nextColorRect.bottom
                anchors.bottom: highScoreButtonRect.top
            }
        }
    ]

    onStateChanged: {
        JS.updateAllBallPosition()
    }
    onHeightChanged: {
        JS.updateAllBallPosition()
    }
    onWidthChanged: {
        JS.updateAllBallPosition()
    }

    Component.onCompleted: {
        JS.updateHighScore()
    }
}
